<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>提醒详情</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <style>
        body { background: #f5f5f5; }
        .container { max-width: 600px; padding: 15px; }
        .reminder-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .action-buttons { margin: 20px 0; }
        .action-buttons .btn { margin-bottom: 10px; width: 100%; }
        textarea { resize: vertical; min-height: 100px; }
        .status-badge {
            display: inline-block;
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="reminder-card">
            <h4>{$reminder.title}</h4>
            
            <!-- 状态显示 -->
            <div class="mb-3">
                {if $reminder.is_recurring}
                    <span class="status-badge bg-info text-white">循环提醒</span>
                {/if}
                {if $reminder.is_completed}
                    <span class="status-badge bg-success text-white">已完成</span>
                {/if}
                {if $reminder.is_finished}
                    <span class="status-badge bg-secondary text-white">已完结</span>
                {/if}
                {if $reminder.is_disabled}
                    <span class="status-badge bg-danger text-white">已禁用</span>
                {/if}
                {if strtotime($reminder.due_date) < time() && !$reminder.is_completed && !$reminder.is_finished && !$reminder.is_disabled}
                    <span class="status-badge bg-warning text-dark">已过期</span>
                {/if}
            </div>

            {if $reminder.description}
                <p class="text-muted">{$reminder.description}</p>
            {/if}
            <p class="text-info">提醒时间：{$reminder.due_date}</p>
        </div>

        <!-- 备注表单 -->
        <form id="noteForm" class="mb-4">
            <div class="mb-3">
                <label class="form-label">备注内容</label>
                <textarea class="form-control" name="notes" required>{$reminder.notes|default=''}</textarea>
            </div>
            <button type="submit" class="btn btn-primary w-100">保存备注</button>
        </form>

        <!-- 其他操作按钮 -->
        <div class="action-buttons">
            {if !$reminder.is_completed }
                <!-- 未完成且未完结且未禁用时显示完成按钮 -->
                <button type="button" class="btn btn-success" onclick="completeReminder()">标记完成</button>
            {/if}

            {if $reminder.is_completed || $reminder.is_finished}
                <!-- 已完成或已完结时显示启用并延后按钮 -->
                <a href="/reminder/postpone_page?reminder_id={$reminder.id}&key={$operation_key}" class="btn btn-warning">启用并延后提醒</a>
            {else}
                <!-- 其他情况显示延后按钮 -->
                <a href="/reminder/postpone_page?reminder_id={$reminder.id}&key={$operation_key}" class="btn btn-warning">延后提醒</a>
            {/if}

            {if ($reminder.is_recurring || strtotime($reminder.due_date) >= time()) && !$reminder.is_disabled}
                <!-- 循环提醒或未过期的提醒显示禁用按钮 -->
                <button type="button" class="btn btn-danger" onclick="confirmDisable()">禁用提醒</button>
            {/if}
        </div>

        <!-- 禁用提醒模态框 -->
        <div class="modal fade" id="disableModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">禁用提醒</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <p>确定要禁用此提醒吗？此操作不可恢复。</p>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-danger" onclick="confirmDisable()">确认禁用</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/static/js/bootstrap.bundle.min.js"></script>
    <script>
        // 保存备注
        document.getElementById('noteForm').addEventListener('submit', function(e) {
            e.preventDefault();
            fetch('/reminder/note?reminder_id={$reminder.id}&key={$operation_key}', {
                method: 'POST',
                body: new FormData(this)
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 200) {
                    alert('备注保存成功');
                } else {
                    alert(data.message || '保存失败');
                }
            });
        });

        // 标记完成
        function completeReminder() {
            if (!confirm('确定要标记此提醒为已完成吗？')) return;
            
            fetch('/reminder/complete?reminder_id={$reminder.id}&key={$operation_key}', {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 200) {
                    alert('提醒已标记为完成');
                    window.close();
                } else {
                    alert(data.message || '操作失败');
                }
            });
        }

        // 禁用提醒
        function confirmDisable() {
            if (!confirm('确定要禁用此提醒吗？此操作不可恢复。')) return;
            
            fetch('/reminder/disable?reminder_id={$reminder.id}&key={$operation_key}', {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 200) {
                    alert('提醒已禁用');
                    window.close();
                } else {
                    alert(data.message || '操作失败');
                }
            });
        }
    </script>
</body>
</html> 